<template>
  <div>
    <van-nav-bar style="color: #999999" >
      <template #left>
        消息
        <div style="margin-left: 1rem">
          <van-icon style="float: left" name="smile-o" size="18" />清除未读
        </div>
      </template>
      <template #right>
<!--        <van-icon name="service-o" size="18" />客服-->
      </template>
    </van-nav-bar>

    <van-cell :to="'/news_comments'" class="line">
      <van-image style=" float:left; margin: 0.5rem 1rem"  round width="3.44rem" height="3.44rem" :src="img1" />
      <label style="float: left; margin-top: 1.5rem;">评论</label>
      <!--<i  class="unread">-->
        <!--12-->
      <!--</i>-->
      <van-icon style="font-size: 27px;margin-top: 2rem; margin-left: 13.5rem;" name="arrow"  size="19" />
    </van-cell>

    <van-cell class="line" :to="'/news_praise'" >
      <van-image style=" float:left; margin: 0.5rem 1rem"  round width="3.44rem" height="3.44rem" :src="img2" />
      <label style="float: left; margin-top: 1.5rem;">赞 </label>
      <!--<i  class="unread">-->
        <!--12-->
      <!--</i>-->
      <van-icon style="font-size: 27px;margin-top: 1.8rem; margin-left: 14.2rem;" name="arrow"  size="19" />
    </van-cell>

<!--    <van-cell class="line">-->
<!--      <van-image style=" float:left; margin: 0.5rem 1rem"  round width="3.44rem" height="3.44rem" :src="img3" />-->
<!--      <label style="float: left; margin-top: 0.95rem;">热门推荐</label>-->
<!--      <label class="content" for="">独家攻略，新手党竟能做这么多！</label>-->
<!--      <label  class="time">-->
<!--        19:20-->
<!--      </label>-->
<!--    </van-cell>-->



	<footer_active></footer_active>
  </div>
</template>
<script>
import axios from 'axios'
import footer_active from './footer_active'

export default {
  name: 'news_index',
  data (){
	return{
      Visible: false,
      img1:require('@/image/comment.png'),
      img2:require('@/image/praise.png'),
      img3:require('@/image/hot.png')

    }
  },
  methods: {
     backHistory(){
        this.$router.go(-1);//返回上一层
      },
      showPopup() {
        this.Visible = true;
      },

  },
  components:{
	  footer_active
  },

 }
</script>

<style>
  .line{
    /*background-color: #c7edcc;*/
    margin-left: -1.5rem;
    border-bottom:0.15rem solid #F2F2F2;
    height: 5.44rem;
    width: 23.97rem;
    position: relative;
  }
  .unread{
    /*display:block;*/
    background-color: red;
    border-radius:50%;
    width:1.5rem;
    height:1.5rem;
    top: 2rem;
    left:18rem;
    text-align: center;
    line-height: 1.5rem;
    position: absolute;
    color: white;
  }
  .time{
    float: right;
  }
  .content{
    position: absolute;
    top:2.78rem;
    left: 5.5rem;
  }

</style>
